<template>
  <div class="character-pane">
    <div class="title-bar">
      <span class="title">
        <ri class="title-icon" i="medal"></ri>
        个人成就
      </span>
      <span class="right">
      </span>
    </div>
    <div class="stats-pane">
      <div class="stats-box">{{personalStats.notesTaken}}</div>
      <div class="stats-box">{{personalStats.matsFaved}}</div>
    </div>
    <calendar-heatmap :end-date="today" :values="heatmap" tooltip-unit="星" />

    Pid: {{$store.getters.pid}}
    <mosaic-progress :data="prs"></mosaic-progress>
  </div>
</template>

<script>
import MosaicProgress from "../tools/MosaicProgress.vue";
export default {
  components: {
    MosaicProgress
  },
  data() {
    return {
      personalStats: {
        notesTaken: 102,
        matsFaved: 88,
      },
      prs : [
        {percent: 0, info:"什么都没做"},
        {percent: 10, info:"初步了解"},
        {percent: 20, info:"初步了解"},
        {percent: 30, info:"初步了解"},
        {percent: 40, info:"初步了解"},
        {percent: 50, info:"初步了解"},
        {percent: 60, info:"初步了解"},
        {percent: 70, info:"初步了解"},
        {percent: 80, info:"初步了解"},
        {percent: 90, info:"初步了解"},
        {percent: 100, info:"初步了解"},
      ],
      heatmap: [
        {date: '2018-9-21', count: 10}
      ],
      today: new Date()
    }
  }
  
}
</script>

<style lang="stylus">
.character-pane
  text-align left

  .stats-pane
    display flex
    padding 1vh 1vw

    .stats-box
      display flex
      box-flex 1
      flex 1 0
      flex-direction column
</style>

